<template>
	<view class="tab-line-box">
		<view class="tab-line">
			<view class="tab-bar">
				<view
					v-for="item in tabList"
					:key="item.value"
					class="tab-item"
					:class="item.value == activeTab ? 'tab-active' : ''"
					@click="changeTab(item)"
				>
					{{ item.text }}
					<hr
						:class="
							item.value == activeTab ? 'tab-active-line' : ''
						"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		activeTab: {
			type: [String, Number],
			value: '',
		},
		tabList: {
			type: Array,
			value: [],
		},
	},
	computed: {
		userInfo() {
			return uni.getStorageSync('user').userInfo
		},
		phone() {
			return uni.getStorageSync('phone')
		},
	},
	methods: {
		changeTab(item) {
			this.$emit('change', item.value, item)
		},
	},
}
</script>

<style lang="scss" scoped>
.tab-line-box {
	height: 100rpx;
	width: 100%;
	position: fixed;
	z-index: 100;
}
.tab-line {
	height: 100rpx;
	overflow: hidden;
	z-index: 9999;
	width: 100%;
}

.tab-bar {
	box-sizing: content-box;
	height: 100%;
	position: relative;
	background-color: #ffffff;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	user-select: none;
	padding-bottom: 30rpx;
}

.tab-item {
	position: relative;
	flex: 1 0 auto;
	display: flex;
	text-align: center;
	font-size: 32rpx;
	color: #6b686b;
	position: relative;
	align-items: center;
	justify-content: center;
	line-height: 100rpx;
	padding: 0 20rpx;
}

.tab-active {
	color: #3a74fc;
}

.tab-active-line {
	background: $primary-color;
	height: 6rpx;
	position: absolute;
	bottom: 4rpx;
	width: 30%;
	border-radius: 4rpx;
}
</style>
